<template>
    <div id="personal">
        <div id="bgdiv">
            <div id="bg"></div>
        </div>
        <div id="biaoti">
            <div id="bts">HALF GO</div>
            <div id="name">{{userData.nickname}}</div>
            <div id="id">ID:{{userData.user_id}}</div>
        </div>
        <div id="load">
            <div id="geren">
            <div id="loa">
                <img src="../../assets/img/登录.png" @click="JumptoLogin" alt="">
            </div>
            <!-- <div id="loa">
                <img :src="header" alt="">
            </div> -->
            <div id="huiyuan">{{Islogin?agent[userData.is_agent]:'游客'}}</div>
            </div>
            <div id="xiaoxi">
                <img src="../../assets/img/消息-图标@3x.png"  alt="">
            </div>
            <div id="shezhi">
                <img src="../../assets/img/设置-图标@3x.png" @click="Jumpto('/UserSetting')" alt="">
            </div>
        </div>
        
        <div id="invitation">
            <img src="../../assets/img/邀请好友、@3x.png" alt="">
        </div>
        <div id="liebiao">
            <div id="shouhou">
            <img src="../../assets/img/售后@3x.png"/>
        </div>
        <div id="gouwuche">
            <img src="../../assets/img/购物车@3x.png" alt="">
        </div>
        <div id="dingdan">
            <img src="../../assets/img/订单@3x.png" @click="Jumpnotrece" alt="">
        </div>
        <div id="kabao">
            <img src="../../assets/img/卡包.png" @click="Jumptocoup" alt="">
        </div>
        </div>
        <div id="btn">
            <img src="../../assets/img/菜单键@3x.png" alt="">
            <div id="zhitong">
                赚钱直通车—躺赢
            </div>
        </div>
    </div>
</template>
<script>
import wx from "weixin-js-sdk"
import {_getmedia,_getjsapiticket} from '../../service/wxService.js'
export default {
    data(){
        return{
            Islogin:false,
            userData:{
                nickname:"游客",
                user_id:"000000"
            },
            agent:{
                '0':'会员',
                '1':'代理',
            },
            UserHeader:[],
            header:""
        }
    },
    mounted(){
        let user=JSON.parse(localStorage.getItem("user"))
        if(user){
            this.Islogin=true
            Object.assign(this.userData,user)
        }
    },
    methods:{
        Jumpto(key){
            this.$router.push(key)
        },
        passwordreset(){
            this.$router.push("/passwordreset")
        },
        Jumptocoup(){
            this.$router.push("/personal/coupon/coupon")
        },
        JumptoLogin(){
            this.$router.push("login1")
        },
        Jumpnotrece(){
            this.$router.push('/personal/logistics')
        },
        async uploadavater(){
            var _this = this,imageLength=9;
            var image={localIds:[],serverId:[]};　　//接收微信接口返回的参数
            var imageUrlList=[]　　//用户绑定页面上显示图片的变量
            var mediaIds=[] //接收上传图片返回的serverId（该字段就是调用获取临时素材接口的媒体ID）
            //1.选择图片
            // let access_token="32_jakwFUQ7GsGFpC8hRsZuPf-6vXa4FM_uxxGZUEtKrdOxktVQbloBPjx3IbxpEK1plUaZsIVUUj3OYpva7_EGDvDK0pPVYKF2FvD1vpPROvt-tdyTQedWKVji5OpWCoywIPgOqXhiIxHWR3LkCUUfAIAMEE"
            // let uid= JSON.parse(localStorage.getItem("user")).user_id
            // console.log("access_token",access_token)
            // _getmedia({
            //     access_token:access_token,
            //     media_id:"1237378768e7q8e7r8qwesafdasdfasdfaxss111",
            //     user_id:uid
            // }).then(res=>{
            //     console.log("Imageavater",res)
            // })

            let localhref="http://market.starrymedia.vip/personal"
            await _getjsapiticket(localhref).then(res=>{
                console.log("_getjsapiticket",res)
                if(res.errcode==1){
                    localStorage.setItem("WXjsapi_ticket",JSON.stringify(res.data))
                    wx.config({
                        debug: true, 
                        appId: res.data.appid, // 必填，公众号的唯一标识
                        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                        signature: res.data.signature,// 必填，签名，见附录1
                        jsApiList: [
                            "uploadImage","chooseImage","chooseWXPay","downloadImage"
                        ]
                    });
                }
            })

            let uid= JSON.parse(localStorage.getItem("user")).user_id
            await wx.ready(()=>{
                wx.chooseImage({
                    count: 1, //上传图片的张数，最多上传9张
                    sizeType: ['original', 'compressed'],　　// 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'],　　// 可以指定来源是相册还是相机，默认二者都有
                    success: function(res1) {
                        console.log("uploadavater",res1)
                        wx.uploadImage({
                            localId:res1.localIds[0],
                            success: function(res2) {
                                console.log("uploadImageSuccess",JSON.stringify(res2))
                                try{
                                    let access_token=JSON.parse(localStorage.getItem("WXjsapi_ticket")).access_token
                                    _getmedia({
                                        access_token:access_token,
                                        media_id:res2.serverId,
                                        user_id:uid
                                    }).then(res=>{
                                        _this.header=res.data
                                    })
                                }catch(e){
                                    _this.$toast("catch",JSON.stringify(e))
                                }
                            },
                            fail: function(e2) {
                                console.log("uploadImageError",JSON.stringify(e2));
                            }
                        });
                    },
                    fail: function(e1) {
                        console.log("uploadavater error",e1)
                    }
                });
            })
        }
    }
}
</script>
<style scoped>
#personal{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#geren{
    width: 150px;
}
#bgdiv{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    filter: blur(10px);
    transform: scale(1.1);
}
#bg{
    width: 100%;
    height: 100%;
    background-image: url('../../assets/img/个人中心.jpg');
    background-position:-30px 30px;
    background-size: cover;
    z-index: -1;
}
#biaoti{
    font-family: "DINCond-BlackAlternate";
    margin: 54px 0 0 37.5px;
    font-size: 24px;
    color: #fff;
}
#bts{
    margin: 53px 0 0 0;
    font-size: 24px;
    line-height: 20px;
}
#name{
    font-size: 13px;
    margin: 47px 0 0 0;
    font-weight: 800;
    line-height: 12px;
}
#id{
    font-size: 13px;
    margin: 18px 0 0 0;
    line-height: 12px;
    font-family: "DINPro Medium";
}
#load{
    margin: 98px 0 0 19px;
    height: 50px;
}
#huiyuan{
    color: lavender;
    background: rgb(29, 29, 29);
    width: 72px;
    height: 27px;
    margin: 24px 0 0 -30px;
    text-indent: 38px;
    line-height: 27px;
    float: left;
    position: relative;
    z-index: -1;
}
#loa img{
    width: 60px;
    height: 60px;
    margin: -7px 0 0 0;
    float: left;
    border-radius: 50%;
}
#load #xiaoxi img{
    width: 25px;
    height: 25px;
    float: right;
    margin: 26px 19px 0 0;
}
#load #shezhi img{
    width: 25px;
    height: 25px;
    float: right;
    margin: 25px 17px 0 0;
}
#invitation img{
    width: 360px;
    height: 50px;
    margin: 11px 0 0 8px;
    line-height: 40px;
    border-radius: 5px;
}
#liebiao{
    width: 400px;
    height: 216px;
}
#shouhou img{
    width: 107px;
    height: 100px;
    margin: 13px 0 0 17px;
    float: left;
}
#gouwuche img{
    width: 107px;
    height: 100px;
    margin: 13px 0 0 10px;
    float: left;
}
#dingdan img{
    width: 106px;
    height: 213px;
    margin: 13px 0 0 13px;
    float: left;
}
#kabao img{
    width: 225px;
    height: 100px;
    float: left;
    margin: -100px 0 0 17px;
}
#btn img{
    width: 50px;
    height: 50px;
    margin: 5px 0 0 18px;
    float: left;
}
#btn #zhitong{
    width: 268px;
    height: 50px;
    float: right;
    margin: 5px 18px 0 21px;
    text-align: center;
    line-height: 50px;
    color: black;
    background: white;
    border-radius: 5px;
    font-size: 13px;
    font-family:"PingFang Microsoft YaHei";
    font-weight:1000;
}
</style>
